<?php
use think\Config;
?>
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        <?php echo Config::get('appname');?>
    </title>
    <link href="/static/css/default.css" rel="stylesheet" type="text/css">
    <link href="/static/css/style/green.css" rel="stylesheet" type="text/css" id='link'>
    <script src="/static/js/echarts/echarts.js"></script>
    <style>
        html {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul class="toollist">
            <li>
                <div class="listbox"><i class="iconfont">&#xe6da;</i><em>{$allnum}<p>机构数量</p></em></div>
            </li>
            <li>
                <div class="listbox"><i class="iconfont">&#xe6da;</i><em>{$daoqinum}<p>已到期机构数量</p></em></div>
            </li>
            <li>
                <div class="listbox"><i class="iconfont">&#xe619;</i><em>{$newaddnum}<p>本月新增机构数量</p></em></div>
            </li>
            <li>
                <div class="listbox"><i class="iconfont">&#xe6c9;</i><em>{$monthdaoqinum}<p>本月到期机构数量</p></em></div>
            </li>
            <li>
                <div class="listbox"><i class="iconfont">&#xe648;</i><em>{$usercount}<p>用户数量</p></em></div>
            </li>


        </ul>


        <div class="infolist">

            <div class="infoleft">
                <div class="infoboxleft">
                    <div class="boxtitle"><span>新增机构列表</span><a href="/super/Mechanism/Index?parenttitle=机构管理">更多<i
                                class="iconfont"></i></a></div>

                    <div class="boxdown">
                        <table class="simpletable">

                            <thead>
                                <tr>
                                    <th>机构编号</th>
                                    <th>机构名称</th>
                                    <th>联系人</th>
                                    <th>联系电话</th>
                                    <th>区域</th>
                                    <th>加入时间</th>
                                    <th>到期时间</th>
                                </tr>
                            </thead>

                            <tbody>

                                <tr class="even" v-for="uitem in arrayData">
                                    <td>{{uitem.number}}</td>
                                    <td>{{uitem.name}}</td>
                                    <td>{{uitem.truename}}</td>
                                    <td>{{uitem.phone}}</td>
                                    <td>{{uitem.province}}-{{uitem.city}}-{{uitem.area}}</td>
                                    <td>{{uitem.jointime}}</td>
                                    <td>{{uitem.endtime}}</td>
                                </tr>




                            </tbody>

                        </table>
                    </div>

                </div>
            </div>

            <div class="inforight">
                <div class="infoboxright">
                    <div class="boxtitle"><span>代理商排名</span><a href="/super/Mechanism/DaiLi?parenttitle=代理商管理">更多<i
                                class="iconfont"></i></a></div>

                    <ul class="textlist">
                        <li v-for="uitem in daili"><span></span><a href="#">{{uitem.name}}</a><i>{{uitem.num}}个机构</i>
                        </li>

                    </ul>

                </div>
            </div>

        </div>

        <div class="infolist">

            <div class="infoleft">
                <div class="infoboxleft">
                    <div class="boxtitle"><span>即将到期机构</span><a href="/super/Mechanism/Index?parenttitle=机构管理">更多<i
                                class="iconfont"></i></a></div>

                    <div class="boxdown">
                        <table class="simpletable">

                            <thead>
                                <tr>
                                    <th>机构编号</th>
                                    <th>机构名称</th>
                                    <th>联系人</th>
                                    <th>联系电话</th>
                                    <th>区域</th>
                                    <th>加入时间</th>
                                    <th>到期时间</th>
                                </tr>
                            </thead>

                            <tbody>

                                <tr class="even" v-for="uitem in arrayDatadaoqi">
                                    <td>{{uitem.number}}</td>
                                    <td>{{uitem.name}}</td>
                                    <td>{{uitem.truename}}</td>
                                    <td>{{uitem.phone}}</td>
                                    <td>{{uitem.province}}-{{uitem.city}}-{{uitem.area}}</td>
                                    <td>{{uitem.jointime}}</td>
                                    <td>{{uitem.endtime}}</td>
                                </tr>




                            </tbody>

                        </table>
                    </div>
                </div>

            </div>

            <div class="inforight">
                <div class="infoboxright">
                    <div class="chartbox">
                        <div class="boxtitle"><span>机构分布地区柱状图</span>
                        </div>
                        <div id="chart3" class="charts"></div>



                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/skin.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/vue2.js"></script>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            cur: 1,
            all: 0,
            size: 10,
            allcount: 0,
            arrayData: [],
            arrayDatadaoqi: [],
            daili: []
        },
        methods: {

            getdata: function (_keycontent) {  //查询数据

                var self = this;
                $.post("/super/Mechanism/GetMechanism", { page: self.cur, size: self.size }, function (_result) {
                    self.arrayData = _result.list;

                });

                $.post("/super/Mechanism/GetMechanism", { page: self.cur, size: self.size, "daoqi": 1 }, function (_result) {
                    self.arrayDatadaoqi = _result.list;

                });

                $.post("/super/Mechanism/daililistseq", {}, function (_result) {
                    self.daili = _result;

                });

            },

        },
        created: function () {  //初始化事件里边去调用查询方法
            this.getdata("");
        }
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('chart3'), 'uimaker');

    // 指定图表的配置项和数据   

    $.post("/super/Mechanism/jigouaddresstj", function (data) {

        var items = [];
        var value = [];
        for(var i=0;i<data.length;i++){
            items.push(data[i].province);
            value.push(data[i].num);
        }
        console.log(items);

        option = {
            tooltip: {
                trigger: 'item',
                textStyle: { fontSize: 14 },
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },

            grid: {
                x: 60,
                x2: 40,
                y: 10,
                height: 140
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: items
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    data: value
                },


            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option);
        window.addEventListener("resize", function () {
            myChart2.resize();
        });

    });


</script>

</html>